import { defineStore } from 'pinia';
import { RouteRecordRaw } from 'vue-router';

import { RouteItem } from '@/api/model/permissionModel';
import { getMenuList } from '@/api/permission';
import router, { homepageRouterList } from '@/router';
import { store } from '@/store';
import { transformObjectToRoute } from '@/utils/route';

export const usePermissionStore = defineStore('permission', {
  state: () => ({
    whiteListRouters: ['/login'],
    routers: [],
    removeRoutes: [],
    asyncRoutes: [],
  }),
  actions: {
    async initRoutes() {
      const accessedRouters = this.asyncRoutes;

      // 在菜单展示全部路由
      this.routers = [...homepageRouterList];
      // 在菜单只展示动态路由和首页
      // this.routers = [...homepageRouterList, ...accessedRouters];
      // 在菜单只展示动态路由
      // this.routers = [...accessedRouters];
    },
    async buildAsyncRoutes() {
      try {
        // 发起菜单权限请求 获取菜单列表
        const list = [
          {
            path: '/list',
            name: 'list',
            component: 'LAYOUT',
            redirect: '/list/base',
            meta: {
              title: '列表页',
              icon: 'view-list',
            },
            children: [
              {
                path: 'base',
                name: 'ListBase',
                component: '/list/base/index',
                meta: {
                  title: '基础列表页',
                },
              },
              {
                path: 'card',
                name: 'ListCard',
                component: '/list/card/index',
                meta: {
                  title: '卡片列表页',
                },
              },
              {
                path: 'filter',
                name: 'ListFilter',
                component: '/list/filter/index',
                meta: {
                  title: '筛选列表页',
                },
              },
              {
                path: 'tree',
                name: 'ListTree',
                component: '/list/tree/index',
                meta: {
                  title: '树状筛选列表页',
                },
              },
            ],
          },
          // {
          //   path: '/detail',
          //   name: 'detail',
          //   component: 'LAYOUT',
          //   redirect: '/detail/base',
          //   meta: {
          //     title: '详情页',
          //     icon: 'layers',
          //   },
          //   children: [
          //     {
          //       path: 'base',
          //       name: 'DetailBase',
          //       component: '/detail/base/index',
          //       meta: {
          //         title: '基础详情页',
          //       },
          //     },
          //     {
          //       path: 'advanced',
          //       name: 'DetailAdvanced',
          //       component: '/detail/advanced/index',
          //       meta: {
          //         title: '多卡片详情页',
          //       },
          //     },
          //     {
          //       path: 'deploy',
          //       name: 'DetailDeploy',
          //       component: '/detail/deploy/index',
          //       meta: {
          //         title: '数据详情页',
          //       },
          //     },
          //     {
          //       path: 'secondary',
          //       name: 'DetailSecondary',
          //       component: '/detail/secondary/index',
          //       meta: {
          //         title: '二级详情页',
          //       },
          //     },
          //   ],
          // },
          // {
          //   path: '/frame',
          //   name: 'Frame',
          //   component: 'Layout',
          //   redirect: '/frame/doc',
          //   meta: {
          //     icon: 'internet',
          //     title: '外部页面',
          //   },
          //   children: [
          //     {
          //       path: 'doc',
          //       name: 'Doc',
          //       component: 'IFrame',
          //       meta: {
          //         frameSrc: 'https://tdesign.tencent.com/starter/docs/vue-next/get-started',
          //         title: '使用文档（内嵌）',
          //       },
          //     },
          //     {
          //       path: 'TDesign',
          //       name: 'TDesign',
          //       component: 'IFrame',
          //       meta: {
          //         frameSrc: 'https://tdesign.tencent.com/vue-next/getting-started',
          //         title: 'TDesign 文档（内嵌）',
          //       },
          //     },
          //     {
          //       path: 'TDesign2',
          //       name: 'TDesign2',
          //       component: 'IFrame',
          //       meta: {
          //         frameSrc: 'https://tdesign.tencent.com/vue-next/getting-started',
          //         frameBlank: true,
          //         title: 'TDesign 文档（外链）',
          //       },
          //     },
          //   ],
          // },
        ];
        // const asyncRoutes: Array<RouteItem> = (await getMenuList()).list;
        this.asyncRoutes = transformObjectToRoute(list);
        this.asyncRoutes = list;
        await this.initRoutes();
        return this.asyncRoutes;
      } catch (error) {
        throw new Error("Can't build routes");
      }
    },
    async restoreRoutes() {
      // 不需要在此额外调用initRoutes更新侧边导肮内容，在登录后asyncRoutes为空会调用
      this.asyncRoutes.forEach((item: RouteRecordRaw) => {
        if (item.name) {
          router.removeRoute(item.name);
        }
      });
      this.asyncRoutes = [];
    },
  },
});

export function getPermissionStore() {
  return usePermissionStore(store);
}
